<template>
    <div class="createPost-container">

        <el-form ref="pageForm" :rules="rules" :model="pageForm" class="form-container">
            <div class="createPost-main-container">
                <el-row>
                    <el-col :span="21">
                        <el-form-item style="margin-bottom: 40px;" prop="title">
                            <MDinput name="title" v-model="pageForm.title" required :maxlength="100">
                                标题
                            </MDinput>
                        </el-form-item>
                    </el-col>
                    <el-col :span="21">
                        <el-form-item prop="description" style="margin-bottom: 40px;"  label="简介:">
                            <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="pageForm.description">
                            </el-input>
                            <span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="21">
                        <div class="editor-container">
                            <Tinymce :height=400 ref="editor" v-model="pageForm.singlepagecontent"></Tinymce>
                        </div>
                    </el-col>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('pageForm')" :loading="subSaveLoading">保存</el-button>
                            <el-button @click="$router.back()">返回</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>
<script>
  import MDinput from '@/components/MDinput'
  import Tinymce from '@/components/Tinymce'
  import singlePageApi from '../../../api/singlepage'
  export default {
    components: {
      MDinput,
      Tinymce
    },
    data () {
      return {
        pageForm: {
          title: '',
          description: '',
          singlepagecontent: ''
        },
        rules: {
          title: [
            {required: true, message: '请输入新闻标题', trigger: 'blur'}
          ],
          description: [
            {required: true, message: '请输入简介', trigger: 'blur'}
          ]
        },
        subSaveLoading: false,
        code: ''
      }
    },
    computed: {
      contentShortLength () {
        return this.pageForm.description.length
      }
    },
    created () {
      const self = this
      switch (this.$route.name) {
        case 'PageAboutUs':
          self.code = 'about_us'
          break
        case 'PageContactUs':
          self.code = 'contact_us'
          break
        case 'PageUsingHelp':
          self.code = 'use_help'
          break
      }
      singlePageApi.getSingePage(self.code).then(response => {
        const result = response.data.data
        self.pageForm = {
          title: result.title,
          description: result.description,
          singlepagecontent: result.content
        }
      }, () => {
        self.$router.replace({name: 'Error404'})
      })
    },
    methods: {
      submitForm (formName) {
        const self = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.postSinglePage()
          } else {
            return false
          }
        })
      },
      postSinglePage () {
        const self = this
        singlePageApi.updateSingePage(self.code, self.pageForm).then(() => {
          self.hideLoading()
          self.$message.success('操作成功')
        }, response => {
          self.hideLoading()
          self.$message.error(response.data.message)
        })
      },
      hideLoading () {
        this.subSaveLoading = false
      }
    }
  }
</script>
<style scoped rel="stylesheet/scss" lang="scss">
    @import "../../../assets/css/form.scss";

</style>
